<style scoped lang="less"></style>
<template>
    <div class="device-detail-basic">
        <div class="mt-20 flex v-c">
            <div class="recent-week flex-1 text-right">
                <a
                    class="item"
                    :class="{ active: activeDateIndex == index }"
                    href="javascript:;"
                    v-for="(item, index) in recentWeek"
                    :key="index"
                    @click="changeDate(item, index)"
                    >{{ item.month }}月{{ item.date }}日</a
                >
            </div>
            <div class="recent-week flex h-r v-c">
                <a
                    class="item"
                    :class="{ active: activeDateIndex == index }"
                    href="javascript:;"
                    v-for="(item, index) in dateOptions"
                    :key="index"
                    @click="changeDateOptions(index)"
                    >{{ item.name }}</a
                >
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    :pickerOptions="pickerOptions"
                    @change="onDateChange"
                    :clearable="false"
                    class=""
                >
                </el-date-picker>
            </div>
        </div>
        <div class="main-blk mt-10">
            <!-- <div class="flex">
                <p class="fs-12" style="opacity: 0.5">滚动鼠标缩放，按住Shift建拖动鼠标左右平移</p>
            </div> -->
            <el-row class="chart-row" :gutter="20">
                <el-col :span="24">
                    <div id="electricBarChart"></div>
                </el-col>
            </el-row>
        </div>
        <!-- <div class="main-blk mt-10" v-for="(item, index) in dataList" :key="index">
            <div class="flex">
                <p class="fs-12" style="opacity: 0.5">滚动鼠标缩放，按住Shift建拖动鼠标左右平移</p>
            </div>
            <el-row class="chart-row" :gutter="20">
                <el-col :span="24">
                    <div :id="'lineChart' + index"></div>
                </el-col>
            </el-row>
        </div> -->
    </div>
</template>
<script>
export default {
    name: "deviceDetailBasic",
    props: {
        scale: {
            type: Number,
            default: 1,
        },
        id: {
            // 设备ID
            type: String,
            default: "",
        },
        number: {
            // 设备ID
            type: String,
            default: "",
        },
        classify: {
            //物联网类型
            type: String,
            default: "fire",
        },
    },
    components: {},
    watch: {},
    data() {
        return {
            recentWeek: [],
            activeDateIndex: 0,
            dataList: [],
            dateRange: [],
            dateOptions: [
                {
                    days: 7,
                    name: "近一周",
                },
                {
                    days: 30,
                    name: "近一月",
                },
                {
                    days: 365,
                    name: "近一年",
                },
            ],
            filter: {},
            pickerOptions: {
                disabledDate: (time) => {
                    return time.getTime() > Date.now()
                },
            },
        }
    },
    created() {
        // this.getRencentWeek()
        // this.getData()
        this.setFilter()
        this.getChartData()
    },
    methods: {
        getData() {
            this.openFullLoading()
            let activeDate = this.recentWeek[this.activeDateIndex]
            this.$post("/fireFightingIOT/device/normalDataLogList", {
                deviceClassify: this.classify,
                deviceId: this.id,
                time: `${activeDate.year}-${activeDate.month}-${activeDate.date}`,
                tabflag: this.classify == "1" ? 2 : 1,
            }).then(
                (res) => {
                    this.closeFullLoading()
                    // this.dataList = res.data
                    this.dataList = res.data.oneList || []
                    this.$nextTick(() => {
                        this.renderCharts()
                    })
                },
                (err) => {
                    this.closeFullLoading()
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        onDateChange(e) {
            this.filter.startTime = this.dateRange[0] + " 00:00:00"
            this.filter.endTime = this.dateRange[1] + " 23:59:59"
            this.activeDateIndex = -1
            this.getChartData()
        },
        setFilter() {
            const days = this.dateOptions[this.activeDateIndex].days
            const { startTime, endTime } = this.getStartEndTime(days)
            this.dateRange = [startTime.substr(0, 11), endTime.substr(0, 11)]
            this.filter = { startTime, endTime }
        },
        changeDateOptions(index) {
            this.activeDateIndex = index
            this.setFilter()
            this.getChartData()
        },
        getChartData() {
            const { startTime, endTime } = this.filter
            this.$get("/fireFightingIOT/device/electricEnergyList", {
                number: this.number,
                startTime,
                endTime,
            }).then(
                (res) => {
                    const categories = res.data.map((item) => item.dateTime)
                    const series = [
                        {
                            name: "电能值",
                            data: res.data.map((item) => +item.activeElectric),
                        },
                    ]
                    let chartData = {
                        categories,
                        series,
                    }
                    this.utils.renderBar({
                        id: "electricBarChart",
                        chartData: chartData,
                        width: 925,
                        height: 220,
                        scale: this.scale,
                    })
                },
                (err) => {
                    this.closeFullLoading()
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        renderCharts() {
            for (let i = 0; i < this.dataList.length; i++) {
                this.renderLineChart(i)
            }
        },
        renderLineChart(index) {
            let data = [...this.dataList[index].twoList]
            let series = []
            let categories = data[0].valueList.map((item) => item.sendtime)
            data.forEach((item) => {
                let valueList = item.valueList
                series.push({
                    name: item.name,
                    data: valueList.map((item) => {
                        let activeDate = this.recentWeek[this.activeDateIndex]
                        let time = item.sendtime.split(":")
                        let date = Date.UTC(
                            activeDate.year,
                            activeDate.month - 1,
                            activeDate.date,
                            +time[0],
                            +time[1],
                            0
                        )
                        return [date, +item.value]
                    }),
                })
            })
            let chartData = {
                categories: categories,
                series: series,
            }
            this.utils.renderSpline({
                id: "lineChart" + index,
                chartData: chartData,
                width: 925,
                height: 220,
                scale: this.scale,
            })
        },

        formatDate(d) {
            let year = d.getFullYear()
            let month = d.getMonth() + 1
            let date = d.getDate()
            return { year, month, date }
        },
        getRencentWeek() {
            const today = new Date()
            let dates = []
            for (let i = 6; i >= 0; i--) {
                let thisDate = new Date()
                thisDate.setTime(thisDate.getTime() - 3600 * 1000 * 24 * i)
                dates.push(this.formatDate(thisDate))
            }
            this.recentWeek = dates
        },
        getStartEndTime(days) {
            const today = new Date()
            const ts = today.getTime()
            const endTime = this.utils.timestamp2datetime(ts)
            const startTs = ts - 3600 * 1000 * 24 * days
            const startTime = this.utils.timestamp2datetime(startTs)
            return {
                startTime,
                endTime,
            }
        },
        changeDate(item, index) {
            this.activeDateIndex = index
            this.getData()
        },
        exportAction() {},
    },
}
</script>
